<template>
	<view class="height-100 overflow-hidden bg-gray">
		<view class="position-fixed-top" style="z-index: 99;">
			<!-- 分类 -->
			<view class="flex-direction-row justify-around padding-lr padding-tb-xs bg-white">
				<block v-for='(item,index) in statusArray' :key='index'>
					<text class="text-df padding-tb-xsm borderBottomWhite" :class="{'select-on color-df':status===item.status}"
						@click="statusChange(item.status)">{{item.title}}</text>
				</block>
			</view>
		</view>
		<view style="height: 90rpx;"></view>
		<block v-for='(item,index) in prescription' :key='index'>
			<view class="radius-xl bg-white margin padding-sm flex-direction-column">
				<view class="doctor-info">
					<image class="avatar" :src="item.imageUrl" mode="aspectFit"></image>
					<view class="details">
						<view class="doctor-name">{{ item.productName }}</view>
						<view class="margin-top-xs text-smd" style="width: 100%;">预约时间：{{ item.appointmentTime }}</view>
						<view class="margin-top-xs text-smd" style="width: 100%;">用户手机号：{{ item.mobile }}</view>
					</view>
				</view>
				<view class="flex-direction-row justify-center padding-top">
					<text
						class="text-smd bg-red padding-tb-xs text-center padding-lr color-white radius-xl margin-right"
						@click="goDetail(item)">详情</text>
					<text class="text-smd bg-red padding-tb-xs text-center padding-lr color-white radius-xl"
						@click="goSignInModel(item.status,item.id)">{{ item.status == 1 ? '确认服务' : '已服务' }}</text>
				</view>
			</view>
		</block>
		<noData v-if="prescription.length==0"/>
	</view>
</template>

<script>
	import noData from "@/components/noData.vue"
	export default {
		components:{noData},
		onLoad() {
			this.getPrescription();
		},
		data() {
			return {
				status: 1,
				statusArray: [{
					'title': '未服务',
					'status': 1
				}, {
					'title': '已服务',
					'status': 2
				}],
				statusArr: ['未开方', '已接诊', '已审核', '已复核', '已开方'],
				prescription: []
			}
		},
		methods: {
			statusChange(status) {
				if (this.status === status) return;
				this.status = status;
				this.getPrescription(this.status)
			},
			async getPrescription() {
				const res = await uni.$request.post('/service/list', {
					'status': this.status
				});
				if (res.code == 200) {
					this.prescription = res.rows || [];
					console.log(this.prescription);
				} else {
					uni.showModal({
						title: '提示',
						content: '列表数据查询失败',
						showCancel: false
					})
				}
			},
			goDetail(item) {
				const itemJson = JSON.stringify(item); 
				uni.navigateTo({
					url: `/pages/my/physiotherapyDetail?row=${encodeURIComponent(itemJson)}` + '&status=' + this.status,
				})
			},
			goSignInModel(status,id) {
				if(status!==1){
					return
				}
				uni.showModal({
					title: '温馨提示',
					content: '请确认用户已到场，确认服务后，不允许取消！？',
					success: (res) => {
						if (res.confirm) {
							this.goSignIn(id)
						} else if (res.cancel) {
							console.log('用户点击了取消');
						}
					}
				});
			},
			async goSignIn(id){
				// 在这里处理确认逻辑
				const res = await uni.$request.post(`/service/confirm/${id}`)
				console.log("签到",res)
				if (res.code == 200) {
					uni.showModal({
						title: '提示',
						content: '服务成功',
						showCancel: false
					})
					this.getPrescription(this.status)
				} else {
					uni.showModal({
						title: '提示',
						content: '列表数据查询失败',
						showCancel: false
					})
				}
			}
		}
	}
</script>

<style scoped>
	.borderBottomWhite {
		border-bottom: 8rpx solid #ffffff;
	}

	.select-on {
		border-bottom: 8rpx solid #ff5722;
	}

	.doctor-info {
		display: flex;
	}

	.avatar {
		width: 60px;
		height: 60px;
	}

	.details {
		flex: 1;
		padding-left: 10px;
	}

	.doctor-name {
		font-weight: bold;
	}

	.description {
		color: #999;
		margin-top: 8px;
	}

	.text-smd {
		width: 30%;
	}
</style>